<template>
  <view class="page-container">
    <!-- 头部导航栏 -->
    <view class="header">
      <view class="header__back" @click="navigateBack">
        <text class="iconfont icon-arrow-left"></text>
      </view>
<!--      <view class="header__title">报名审批</view>-->
      <view class="header__more">
        <text class="iconfont icon-more"></text>
      </view>
    </view>

    <!-- 标签切换组件 -->
    <liuyuno-tabs
        :tabData="tabs"
        :activeIndex="activeTab"
        :config="tabConfig"
        @tabClick="handleTabChange"
    ></liuyuno-tabs>

    <!-- 内容区域 -->
    <scroll-view scroll-y class="content-scroll">
      <!-- 进行中标签内容 -->
      <view v-if="activeTab === 0" class="content-list">
        <!-- 招宣活动卡片 -->
        <view class="activity-card" @click="goToDetail('zhaoxuan', 1)">
          <view class="card-header">
            <view class="card-title">2023届招生宣传演讲</view>
            <view class="card-tag">招宣活动</view>
          </view>
          <view class="card-info">计划开始日期：2023/03/29</view>
          <view class="card-info">计划结束日期：2023/03/29</view>
          <view class="card-info">活动区域：湖北省武汉市洪山区</view>
          <view class="card-info">活动牵头宣传组：宣传组名称1</view>
          <view class="card-update">李明于2023/03/29 更新了活动照片</view>
        </view>

        <!-- 母校行活动卡片 -->
        <view class="activity-card" @click="goToDetail('muxiao', 1)">
          <view class="card-header">
            <view class="card-title">武汉第一中学</view>
            <view class="card-tag">母校行活动</view>
          </view>
          <view class="card-info">计划开始日期：2023/03/29</view>
          <view class="card-info">计划结束日期：2023/03/29</view>
          <view class="card-info">行政区域地址：湖北省武汉市洪山区</view>
          <view class="card-update">李明于2023/03/29 更新了活动照片</view>
        </view>
      </view>

      <!-- 已完成标签内容 -->
      <view v-else class="content-list">
        <view class="empty-state">
          <text class="iconfont icon-empty"></text>
          <view class="empty-text">暂无已完成的报名审批</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";

export default {
  components: {
    liuyunoTabs
  },
  data() {
    return {
      // 标签数据
      tabs: ['进行中', '已完成'],
      // 当前激活的标签索引
      activeTab: 0,
      // 标签组件配置
      tabConfig: {
        fontSize: 30,
        color: '#666666',
        activeColor: '#007AFF',
        underLineColor: '#007AFF',
        underLineHeight: 5,
        underLinePadding: 15
      }
    };
  },
  methods: {
    // 标签切换事件
    handleTabChange(index) {
      this.activeTab = index;
    },

    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },

    // 跳转到详情页
    goToDetail(type, id) {
      let url = `/pages/detail/detail?type=${type}&id=${id}`;
      uni.navigateTo({
        url: url
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 头部导航样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;

  &__back, &__more {
    width: 44rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  &__title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333333;
  }
}

/* 内容滚动区域 */
.content-scroll {
  height: calc(100vh - 88rpx - 90rpx); /* 减去头部和标签栏高度 */
  box-sizing: border-box;
}

/* 内容列表样式 */
.content-list {
  padding: 24rpx;
}

/* 活动卡片样式 */
.activity-card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  box-sizing: border-box;

  &:last-child {
    margin-bottom: 0;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-tag {
  font-size: 26rpx;
  color: #007AFF;
  padding: 4rpx 16rpx;
  background-color: rgba(0, 122, 255, 0.1);
  border-radius: 20rpx;
}

.card-info {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 16rpx;
  line-height: 1.5;
}

.card-update {
  font-size: 26rpx;
  color: #999999;
  margin-top: 12rpx;
  padding-top: 16rpx;
  border-top: 1px solid #f5f5f5;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;

  .iconfont {
    font-size: 100rpx;
    color: #dddddd;
    margin-bottom: 20rpx;
  }


  .empty-text {
    font-size: 28rpx;
    color: #999999;
  }
}
</style>
